<h1 id="控件1">控件1</h1>
<p>控件就像是应用这座房子的一块块砖。PyQt5有很多的控件，比如按钮，单选框，滑动条，复选框等等。在本章，我们将介绍一些很有用的控件：<code>QCheckBox</code>，<code>ToggleButton</code>，<code>QSlider</code>，<code>QProgressBar</code>和<code>QCalendarWidget</code>。</p>
<h2 id="qcheckbox">QCheckBox</h2>
<p><code>QCheckBox</code>组件有俩状态：开和关。通常跟标签一起使用，用在激活和关闭一些选项的场景。</p>
<div class="sourceCode" id="cb1"><pre><code class="language-python"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="co">#!/usr/bin/python3</span></a>
<a class="sourceLine" id="cb1-2" data-line-number="2"><span class="co"># -*- coding: utf-8 -*-</span></a>
<a class="sourceLine" id="cb1-3" data-line-number="3"></a>
<a class="sourceLine" id="cb1-4" data-line-number="4"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb1-5" data-line-number="5"><span class="co">ZetCode PyQt5 tutorial </span></a>
<a class="sourceLine" id="cb1-6" data-line-number="6"></a>
<a class="sourceLine" id="cb1-7" data-line-number="7"><span class="co">In this example, a QCheckBox widget</span></a>
<a class="sourceLine" id="cb1-8" data-line-number="8"><span class="co">is used to toggle the title of a window.</span></a>
<a class="sourceLine" id="cb1-9" data-line-number="9"></a>
<a class="sourceLine" id="cb1-10" data-line-number="10"><span class="co">Author: Jan Bodnar</span></a>
<a class="sourceLine" id="cb1-11" data-line-number="11"><span class="co">Website: zetcode.com </span></a>
<a class="sourceLine" id="cb1-12" data-line-number="12"><span class="co">Last edited: August 2017</span></a>
<a class="sourceLine" id="cb1-13" data-line-number="13"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb1-14" data-line-number="14"></a>
<a class="sourceLine" id="cb1-15" data-line-number="15"><span class="im">from</span> PyQt5.QtWidgets <span class="im">import</span> QWidget, QCheckBox, QApplication</a>
<a class="sourceLine" id="cb1-16" data-line-number="16"><span class="im">from</span> PyQt5.QtCore <span class="im">import</span> Qt</a>
<a class="sourceLine" id="cb1-17" data-line-number="17"><span class="im">import</span> sys</a>
<a class="sourceLine" id="cb1-18" data-line-number="18"></a>
<a class="sourceLine" id="cb1-19" data-line-number="19"><span class="kw">class</span> Example(QWidget):</a>
<a class="sourceLine" id="cb1-20" data-line-number="20">    </a>
<a class="sourceLine" id="cb1-21" data-line-number="21">    <span class="kw">def</span> <span class="fu">__init__</span>(<span class="va">self</span>):</a>
<a class="sourceLine" id="cb1-22" data-line-number="22">        <span class="bu">super</span>().<span class="fu">__init__</span>()</a>
<a class="sourceLine" id="cb1-23" data-line-number="23">        </a>
<a class="sourceLine" id="cb1-24" data-line-number="24">        <span class="va">self</span>.initUI()</a>
<a class="sourceLine" id="cb1-25" data-line-number="25">        </a>
<a class="sourceLine" id="cb1-26" data-line-number="26">        </a>
<a class="sourceLine" id="cb1-27" data-line-number="27">    <span class="kw">def</span> initUI(<span class="va">self</span>):      </a>
<a class="sourceLine" id="cb1-28" data-line-number="28"></a>
<a class="sourceLine" id="cb1-29" data-line-number="29">        cb <span class="op">=</span> QCheckBox(<span class="st">&#39;Show title&#39;</span>, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb1-30" data-line-number="30">        cb.move(<span class="dv">20</span>, <span class="dv">20</span>)</a>
<a class="sourceLine" id="cb1-31" data-line-number="31">        cb.toggle()</a>
<a class="sourceLine" id="cb1-32" data-line-number="32">        cb.stateChanged.<span class="ex">connect</span>(<span class="va">self</span>.changeTitle)</a>
<a class="sourceLine" id="cb1-33" data-line-number="33">        </a>
<a class="sourceLine" id="cb1-34" data-line-number="34">        <span class="va">self</span>.setGeometry(<span class="dv">300</span>, <span class="dv">300</span>, <span class="dv">250</span>, <span class="dv">150</span>)</a>
<a class="sourceLine" id="cb1-35" data-line-number="35">        <span class="va">self</span>.setWindowTitle(<span class="st">&#39;QCheckBox&#39;</span>)</a>
<a class="sourceLine" id="cb1-36" data-line-number="36">        <span class="va">self</span>.show()</a>
<a class="sourceLine" id="cb1-37" data-line-number="37">        </a>
<a class="sourceLine" id="cb1-38" data-line-number="38">        </a>
<a class="sourceLine" id="cb1-39" data-line-number="39">    <span class="kw">def</span> changeTitle(<span class="va">self</span>, state):</a>
<a class="sourceLine" id="cb1-40" data-line-number="40">      </a>
<a class="sourceLine" id="cb1-41" data-line-number="41">        <span class="cf">if</span> state <span class="op">==</span> Qt.Checked:</a>
<a class="sourceLine" id="cb1-42" data-line-number="42">            <span class="va">self</span>.setWindowTitle(<span class="st">&#39;QCheckBox&#39;</span>)</a>
<a class="sourceLine" id="cb1-43" data-line-number="43">        <span class="cf">else</span>:</a>
<a class="sourceLine" id="cb1-44" data-line-number="44">            <span class="va">self</span>.setWindowTitle(<span class="st">&#39; &#39;</span>)</a>
<a class="sourceLine" id="cb1-45" data-line-number="45">            </a>
<a class="sourceLine" id="cb1-46" data-line-number="46">        </a>
<a class="sourceLine" id="cb1-47" data-line-number="47"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">&#39;__main__&#39;</span>:</a>
<a class="sourceLine" id="cb1-48" data-line-number="48">    </a>
<a class="sourceLine" id="cb1-49" data-line-number="49">    app <span class="op">=</span> QApplication(sys.argv)</a>
<a class="sourceLine" id="cb1-50" data-line-number="50">    ex <span class="op">=</span> Example()</a>
<a class="sourceLine" id="cb1-51" data-line-number="51">    sys.exit(app.exec_())</a></code></pre></div>
<p>这个例子中，有一个能切换窗口标题的单选框。</p>
<pre><code class="language-python">cb = QCheckBox(&#39;Show title&#39;, self)</code></pre>
<p>这个是<code>QCheckBox</code>的构造器。</p>
<pre><code class="language-python">cb.toggle()</code></pre>
<p>要设置窗口标题，我们就要检查单选框的状态。默认情况下，窗口没有标题，单选框未选中。</p>
<pre><code class="language-python">cb.stateChanged.connect(self.changeTitle)</code></pre>
<p>把<code>changeTitle()</code>方法和<code>stateChanged</code>信号关联起来。这样，<code>changeTitle()</code>就能切换窗口标题了。</p>
<pre><code class="language-python">def changeTitle(self, state):
    
    if state == Qt.Checked:
        self.setWindowTitle(&#39;QCheckBox&#39;)
    else:
        self.setWindowTitle(&#39;&#39;)</code></pre>
<p>控件的状态是由<code>changeTitle()</code>方法控制的，如果空间被选中，我们就给窗口添加一个标题，如果没被选中，就清空标题。</p>
<p>程序展示：</p>
<figure>
<img class="whitelist" src="docs/PyQt5/images/6-qcheckbox.png" alt="QCheckBox" />
</figure>
<h2 id="切换按钮">切换按钮</h2>
<p>切换按钮就是<code>QPushButton</code>的一种特殊模式。 它只有两种状态：按下和未按下。我们再点击的时候切换两种状态，有很多场景会使用到这个功能。</p>
<div class="sourceCode" id="cb6"><pre><code class="language-python"><a class="sourceLine" id="cb6-1" data-line-number="1"><span class="co">#!/usr/bin/python3</span></a>
<a class="sourceLine" id="cb6-2" data-line-number="2"><span class="co"># -*- coding: utf-8 -*-</span></a>
<a class="sourceLine" id="cb6-3" data-line-number="3"></a>
<a class="sourceLine" id="cb6-4" data-line-number="4"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb6-5" data-line-number="5"><span class="co">ZetCode PyQt5 tutorial </span></a>
<a class="sourceLine" id="cb6-6" data-line-number="6"></a>
<a class="sourceLine" id="cb6-7" data-line-number="7"><span class="co">In this example, we create three toggle buttons.</span></a>
<a class="sourceLine" id="cb6-8" data-line-number="8"><span class="co">They will control the background color of a </span></a>
<a class="sourceLine" id="cb6-9" data-line-number="9"><span class="co">QFrame. </span></a>
<a class="sourceLine" id="cb6-10" data-line-number="10"></a>
<a class="sourceLine" id="cb6-11" data-line-number="11"><span class="co">Author: Jan Bodnar</span></a>
<a class="sourceLine" id="cb6-12" data-line-number="12"><span class="co">Website: zetcode.com </span></a>
<a class="sourceLine" id="cb6-13" data-line-number="13"><span class="co">Last edited: August 2017</span></a>
<a class="sourceLine" id="cb6-14" data-line-number="14"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb6-15" data-line-number="15"></a>
<a class="sourceLine" id="cb6-16" data-line-number="16"><span class="im">from</span> PyQt5.QtWidgets <span class="im">import</span> (QWidget, QPushButton, </a>
<a class="sourceLine" id="cb6-17" data-line-number="17">    QFrame, QApplication)</a>
<a class="sourceLine" id="cb6-18" data-line-number="18"><span class="im">from</span> PyQt5.QtGui <span class="im">import</span> QColor</a>
<a class="sourceLine" id="cb6-19" data-line-number="19"><span class="im">import</span> sys</a>
<a class="sourceLine" id="cb6-20" data-line-number="20"></a>
<a class="sourceLine" id="cb6-21" data-line-number="21"><span class="kw">class</span> Example(QWidget):</a>
<a class="sourceLine" id="cb6-22" data-line-number="22">    </a>
<a class="sourceLine" id="cb6-23" data-line-number="23">    <span class="kw">def</span> <span class="fu">__init__</span>(<span class="va">self</span>):</a>
<a class="sourceLine" id="cb6-24" data-line-number="24">        <span class="bu">super</span>().<span class="fu">__init__</span>()</a>
<a class="sourceLine" id="cb6-25" data-line-number="25">        </a>
<a class="sourceLine" id="cb6-26" data-line-number="26">        <span class="va">self</span>.initUI()</a>
<a class="sourceLine" id="cb6-27" data-line-number="27">        </a>
<a class="sourceLine" id="cb6-28" data-line-number="28">        </a>
<a class="sourceLine" id="cb6-29" data-line-number="29">    <span class="kw">def</span> initUI(<span class="va">self</span>):      </a>
<a class="sourceLine" id="cb6-30" data-line-number="30"></a>
<a class="sourceLine" id="cb6-31" data-line-number="31">        <span class="va">self</span>.col <span class="op">=</span> QColor(<span class="dv">0</span>, <span class="dv">0</span>, <span class="dv">0</span>)       </a>
<a class="sourceLine" id="cb6-32" data-line-number="32"></a>
<a class="sourceLine" id="cb6-33" data-line-number="33">        redb <span class="op">=</span> QPushButton(<span class="st">&#39;Red&#39;</span>, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb6-34" data-line-number="34">        redb.setCheckable(<span class="va">True</span>)</a>
<a class="sourceLine" id="cb6-35" data-line-number="35">        redb.move(<span class="dv">10</span>, <span class="dv">10</span>)</a>
<a class="sourceLine" id="cb6-36" data-line-number="36"></a>
<a class="sourceLine" id="cb6-37" data-line-number="37">        redb.clicked[<span class="bu">bool</span>].<span class="ex">connect</span>(<span class="va">self</span>.setColor)</a>
<a class="sourceLine" id="cb6-38" data-line-number="38"></a>
<a class="sourceLine" id="cb6-39" data-line-number="39">        greenb <span class="op">=</span> QPushButton(<span class="st">&#39;Green&#39;</span>, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb6-40" data-line-number="40">        greenb.setCheckable(<span class="va">True</span>)</a>
<a class="sourceLine" id="cb6-41" data-line-number="41">        greenb.move(<span class="dv">10</span>, <span class="dv">60</span>)</a>
<a class="sourceLine" id="cb6-42" data-line-number="42"></a>
<a class="sourceLine" id="cb6-43" data-line-number="43">        greenb.clicked[<span class="bu">bool</span>].<span class="ex">connect</span>(<span class="va">self</span>.setColor)</a>
<a class="sourceLine" id="cb6-44" data-line-number="44"></a>
<a class="sourceLine" id="cb6-45" data-line-number="45">        blueb <span class="op">=</span> QPushButton(<span class="st">&#39;Blue&#39;</span>, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb6-46" data-line-number="46">        blueb.setCheckable(<span class="va">True</span>)</a>
<a class="sourceLine" id="cb6-47" data-line-number="47">        blueb.move(<span class="dv">10</span>, <span class="dv">110</span>)</a>
<a class="sourceLine" id="cb6-48" data-line-number="48"></a>
<a class="sourceLine" id="cb6-49" data-line-number="49">        blueb.clicked[<span class="bu">bool</span>].<span class="ex">connect</span>(<span class="va">self</span>.setColor)</a>
<a class="sourceLine" id="cb6-50" data-line-number="50"></a>
<a class="sourceLine" id="cb6-51" data-line-number="51">        <span class="va">self</span>.square <span class="op">=</span> QFrame(<span class="va">self</span>)</a>
<a class="sourceLine" id="cb6-52" data-line-number="52">        <span class="va">self</span>.square.setGeometry(<span class="dv">150</span>, <span class="dv">20</span>, <span class="dv">100</span>, <span class="dv">100</span>)</a>
<a class="sourceLine" id="cb6-53" data-line-number="53">        <span class="va">self</span>.square.setStyleSheet(<span class="st">&quot;QWidget { background-color: </span><span class="sc">%s</span><span class="st"> }&quot;</span> <span class="op">%</span>  </a>
<a class="sourceLine" id="cb6-54" data-line-number="54">            <span class="va">self</span>.col.name())</a>
<a class="sourceLine" id="cb6-55" data-line-number="55">        </a>
<a class="sourceLine" id="cb6-56" data-line-number="56">        <span class="va">self</span>.setGeometry(<span class="dv">300</span>, <span class="dv">300</span>, <span class="dv">280</span>, <span class="dv">170</span>)</a>
<a class="sourceLine" id="cb6-57" data-line-number="57">        <span class="va">self</span>.setWindowTitle(<span class="st">&#39;Toggle button&#39;</span>)</a>
<a class="sourceLine" id="cb6-58" data-line-number="58">        <span class="va">self</span>.show()</a>
<a class="sourceLine" id="cb6-59" data-line-number="59">        </a>
<a class="sourceLine" id="cb6-60" data-line-number="60">        </a>
<a class="sourceLine" id="cb6-61" data-line-number="61">    <span class="kw">def</span> setColor(<span class="va">self</span>, pressed):</a>
<a class="sourceLine" id="cb6-62" data-line-number="62">        </a>
<a class="sourceLine" id="cb6-63" data-line-number="63">        source <span class="op">=</span> <span class="va">self</span>.sender()</a>
<a class="sourceLine" id="cb6-64" data-line-number="64">        </a>
<a class="sourceLine" id="cb6-65" data-line-number="65">        <span class="cf">if</span> pressed:</a>
<a class="sourceLine" id="cb6-66" data-line-number="66">            val <span class="op">=</span> <span class="dv">255</span></a>
<a class="sourceLine" id="cb6-67" data-line-number="67">        <span class="cf">else</span>: val <span class="op">=</span> <span class="dv">0</span></a>
<a class="sourceLine" id="cb6-68" data-line-number="68">                        </a>
<a class="sourceLine" id="cb6-69" data-line-number="69">        <span class="cf">if</span> source.text() <span class="op">==</span> <span class="st">&quot;Red&quot;</span>:</a>
<a class="sourceLine" id="cb6-70" data-line-number="70">            <span class="va">self</span>.col.setRed(val)                </a>
<a class="sourceLine" id="cb6-71" data-line-number="71">        <span class="cf">elif</span> source.text() <span class="op">==</span> <span class="st">&quot;Green&quot;</span>:</a>
<a class="sourceLine" id="cb6-72" data-line-number="72">            <span class="va">self</span>.col.setGreen(val)             </a>
<a class="sourceLine" id="cb6-73" data-line-number="73">        <span class="cf">else</span>:</a>
<a class="sourceLine" id="cb6-74" data-line-number="74">            <span class="va">self</span>.col.setBlue(val) </a>
<a class="sourceLine" id="cb6-75" data-line-number="75">            </a>
<a class="sourceLine" id="cb6-76" data-line-number="76">        <span class="va">self</span>.square.setStyleSheet(<span class="st">&quot;QFrame { background-color: </span><span class="sc">%s</span><span class="st"> }&quot;</span> <span class="op">%</span></a>
<a class="sourceLine" id="cb6-77" data-line-number="77">            <span class="va">self</span>.col.name())  </a>
<a class="sourceLine" id="cb6-78" data-line-number="78">       </a>
<a class="sourceLine" id="cb6-79" data-line-number="79">       </a>
<a class="sourceLine" id="cb6-80" data-line-number="80"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">&#39;__main__&#39;</span>:</a>
<a class="sourceLine" id="cb6-81" data-line-number="81">    </a>
<a class="sourceLine" id="cb6-82" data-line-number="82">    app <span class="op">=</span> QApplication(sys.argv)</a>
<a class="sourceLine" id="cb6-83" data-line-number="83">    ex <span class="op">=</span> Example()</a>
<a class="sourceLine" id="cb6-84" data-line-number="84">    sys.exit(app.exec_())</a></code></pre></div>
<p>我们创建了一个切换按钮和一个<code>QWidget</code>，并把<code>QWidget</code>的背景设置为黑色。点击不同的切换按钮，背景色会在红、绿、蓝之间切换（而且能看到颜色合成的效果，而不是单纯的颜色覆盖）。</p>
<pre><code class="language-python">self.col = QColor(0, 0, 0)</code></pre>
<p>设置颜色为黑色。</p>
<pre><code class="language-python">redb = QPushButton(&#39;Red&#39;, self)
redb.setCheckable(True)
redb.move(10, 10)</code></pre>
<p>创建一个<code>QPushButton</code>，然后调用它的<code>setCheckable()</code>的方法就把这个按钮编程了切换按钮。</p>
<pre><code class="language-python">redb.clicked[bool].connect(self.setColor)</code></pre>
<p>把点击信号和我们定义好的函数关联起来，这里是把点击事件转换成布尔值。</p>
<pre><code class="language-python">source = self.sender()</code></pre>
<p>获取被点击的按钮。</p>
<pre><code class="language-python">if source.text() == &quot;Red&quot;:
    self.col.setRed(val)</code></pre>
<p>如果是标签为“red”的按钮被点击，就把颜色更改为预设好的对应颜色。</p>
<pre><code class="language-python">self.square.setStyleSheet(&quot;QFrame { background-color: %s }&quot; %
    self.col.name())</code></pre>
<p>使用样式表（就是CSS的SS）改变背景色</p>
<p>程序展示：</p>
<figure>
<img class="whitelist" src="docs/PyQt5/images/6-togglebutton.png" alt="toggle button" />
</figure>
<h2 id="滑块">滑块</h2>
<p><code>QSlider</code>是个有一个小滑块的组件，这个小滑块能拖着前后滑动，这个经常用于修改一些具有范围的数值，比文本框或者点击增加减少的文本框（spin box）方便多了。</p>
<p>本例用一个滑块和一个标签展示。标签为一个图片，滑块控制标签（的值）。</p>
<blockquote>
<p>先弄个叫mute.png的静音图标准备着。</p>
</blockquote>
<div class="sourceCode" id="cb13"><pre><code class="language-python"><a class="sourceLine" id="cb13-1" data-line-number="1"><span class="co">#!/usr/bin/python3</span></a>
<a class="sourceLine" id="cb13-2" data-line-number="2"><span class="co"># -*- coding: utf-8 -*-</span></a>
<a class="sourceLine" id="cb13-3" data-line-number="3"></a>
<a class="sourceLine" id="cb13-4" data-line-number="4"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb13-5" data-line-number="5"><span class="co">ZetCode PyQt5 tutorial </span></a>
<a class="sourceLine" id="cb13-6" data-line-number="6"></a>
<a class="sourceLine" id="cb13-7" data-line-number="7"><span class="co">This example shows a QSlider widget.</span></a>
<a class="sourceLine" id="cb13-8" data-line-number="8"></a>
<a class="sourceLine" id="cb13-9" data-line-number="9"><span class="co">Author: Jan Bodnar</span></a>
<a class="sourceLine" id="cb13-10" data-line-number="10"><span class="co">Website: zetcode.com </span></a>
<a class="sourceLine" id="cb13-11" data-line-number="11"><span class="co">Last edited: August 2017</span></a>
<a class="sourceLine" id="cb13-12" data-line-number="12"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb13-13" data-line-number="13"></a>
<a class="sourceLine" id="cb13-14" data-line-number="14"><span class="im">from</span> PyQt5.QtWidgets <span class="im">import</span> (QWidget, QSlider, </a>
<a class="sourceLine" id="cb13-15" data-line-number="15">    QLabel, QApplication)</a>
<a class="sourceLine" id="cb13-16" data-line-number="16"><span class="im">from</span> PyQt5.QtCore <span class="im">import</span> Qt</a>
<a class="sourceLine" id="cb13-17" data-line-number="17"><span class="im">from</span> PyQt5.QtGui <span class="im">import</span> QPixmap</a>
<a class="sourceLine" id="cb13-18" data-line-number="18"><span class="im">import</span> sys</a>
<a class="sourceLine" id="cb13-19" data-line-number="19"></a>
<a class="sourceLine" id="cb13-20" data-line-number="20"><span class="kw">class</span> Example(QWidget):</a>
<a class="sourceLine" id="cb13-21" data-line-number="21">    </a>
<a class="sourceLine" id="cb13-22" data-line-number="22">    <span class="kw">def</span> <span class="fu">__init__</span>(<span class="va">self</span>):</a>
<a class="sourceLine" id="cb13-23" data-line-number="23">        <span class="bu">super</span>().<span class="fu">__init__</span>()</a>
<a class="sourceLine" id="cb13-24" data-line-number="24">        </a>
<a class="sourceLine" id="cb13-25" data-line-number="25">        <span class="va">self</span>.initUI()</a>
<a class="sourceLine" id="cb13-26" data-line-number="26">        </a>
<a class="sourceLine" id="cb13-27" data-line-number="27">        </a>
<a class="sourceLine" id="cb13-28" data-line-number="28">    <span class="kw">def</span> initUI(<span class="va">self</span>):      </a>
<a class="sourceLine" id="cb13-29" data-line-number="29"></a>
<a class="sourceLine" id="cb13-30" data-line-number="30">        sld <span class="op">=</span> QSlider(Qt.Horizontal, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb13-31" data-line-number="31">        sld.setFocusPolicy(Qt.NoFocus)</a>
<a class="sourceLine" id="cb13-32" data-line-number="32">        sld.setGeometry(<span class="dv">30</span>, <span class="dv">40</span>, <span class="dv">100</span>, <span class="dv">30</span>)</a>
<a class="sourceLine" id="cb13-33" data-line-number="33">        sld.valueChanged[<span class="bu">int</span>].<span class="ex">connect</span>(<span class="va">self</span>.changeValue)</a>
<a class="sourceLine" id="cb13-34" data-line-number="34">        </a>
<a class="sourceLine" id="cb13-35" data-line-number="35">        <span class="va">self</span>.label <span class="op">=</span> QLabel(<span class="va">self</span>)</a>
<a class="sourceLine" id="cb13-36" data-line-number="36">        <span class="va">self</span>.label.setPixmap(QPixmap(<span class="st">&#39;mute.png&#39;</span>))</a>
<a class="sourceLine" id="cb13-37" data-line-number="37">        <span class="va">self</span>.label.setGeometry(<span class="dv">160</span>, <span class="dv">40</span>, <span class="dv">80</span>, <span class="dv">30</span>)</a>
<a class="sourceLine" id="cb13-38" data-line-number="38">        </a>
<a class="sourceLine" id="cb13-39" data-line-number="39">        <span class="va">self</span>.setGeometry(<span class="dv">300</span>, <span class="dv">300</span>, <span class="dv">280</span>, <span class="dv">170</span>)</a>
<a class="sourceLine" id="cb13-40" data-line-number="40">        <span class="va">self</span>.setWindowTitle(<span class="st">&#39;QSlider&#39;</span>)</a>
<a class="sourceLine" id="cb13-41" data-line-number="41">        <span class="va">self</span>.show()</a>
<a class="sourceLine" id="cb13-42" data-line-number="42">        </a>
<a class="sourceLine" id="cb13-43" data-line-number="43">        </a>
<a class="sourceLine" id="cb13-44" data-line-number="44">    <span class="kw">def</span> changeValue(<span class="va">self</span>, value):</a>
<a class="sourceLine" id="cb13-45" data-line-number="45"></a>
<a class="sourceLine" id="cb13-46" data-line-number="46">        <span class="cf">if</span> value <span class="op">==</span> <span class="dv">0</span>:</a>
<a class="sourceLine" id="cb13-47" data-line-number="47">            <span class="va">self</span>.label.setPixmap(QPixmap(<span class="st">&#39;mute.png&#39;</span>))</a>
<a class="sourceLine" id="cb13-48" data-line-number="48">        <span class="cf">elif</span> value <span class="op">&gt;</span> <span class="dv">0</span> <span class="kw">and</span> value <span class="op">&lt;=</span> <span class="dv">30</span>:</a>
<a class="sourceLine" id="cb13-49" data-line-number="49">            <span class="va">self</span>.label.setPixmap(QPixmap(<span class="st">&#39;min.png&#39;</span>))</a>
<a class="sourceLine" id="cb13-50" data-line-number="50">        <span class="cf">elif</span> value <span class="op">&gt;</span> <span class="dv">30</span> <span class="kw">and</span> value <span class="op">&lt;</span> <span class="dv">80</span>:</a>
<a class="sourceLine" id="cb13-51" data-line-number="51">            <span class="va">self</span>.label.setPixmap(QPixmap(<span class="st">&#39;med.png&#39;</span>))</a>
<a class="sourceLine" id="cb13-52" data-line-number="52">        <span class="cf">else</span>:</a>
<a class="sourceLine" id="cb13-53" data-line-number="53">            <span class="va">self</span>.label.setPixmap(QPixmap(<span class="st">&#39;max.png&#39;</span>))</a>
<a class="sourceLine" id="cb13-54" data-line-number="54">            </a>
<a class="sourceLine" id="cb13-55" data-line-number="55"></a>
<a class="sourceLine" id="cb13-56" data-line-number="56"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">&#39;__main__&#39;</span>:</a>
<a class="sourceLine" id="cb13-57" data-line-number="57"></a>
<a class="sourceLine" id="cb13-58" data-line-number="58">    app <span class="op">=</span> QApplication(sys.argv)</a>
<a class="sourceLine" id="cb13-59" data-line-number="59">    ex <span class="op">=</span> Example()</a>
<a class="sourceLine" id="cb13-60" data-line-number="60">    sys.exit(app.exec_())</a></code></pre></div>
<p>这里是模拟的音量控制器。拖动滑块，能改变标签位置的图片。</p>
<pre><code class="language-python">sld = QSlider(Qt.Horizontal, self)</code></pre>
<p>创建一个水平的<code>QSlider</code>。</p>
<pre><code class="language-python">self.label = QLabel(self)
self.label.setPixmap(QPixmap(&#39;mute.png&#39;))</code></pre>
<p>创建一个<code>QLabel</code>组件并给它设置一个静音图标。</p>
<pre><code class="language-python">sld.valueChanged[int].connect(self.changeValue)</code></pre>
<p>把<code>valueChanged</code>信号跟<code>changeValue()</code>方法关联起来。</p>
<pre><code class="language-python">if value == 0:
    self.label.setPixmap(QPixmap(&#39;mute.png&#39;))
...</code></pre>
<p>根据音量值的大小更换标签位置的图片。这段代码是：如果音量为0，就把图片换成 mute.png。</p>
<p>程序展示：</p>
<figure>
<img class="whitelist" src="docs/PyQt5/images/6-qslider.png" alt="QSlider widget" />
</figure>
<h2 id="进度条">进度条</h2>
<p>进度条是用来展示任务进度的（我也不想这样说话）。它的滚动能让用户了解到任务的进度。<code>QProgressBar</code>组件提供了水平和垂直两种进度条，进度条可以设置最大值和最小值，默认情况是0~99。</p>
<div class="sourceCode" id="cb18"><pre><code class="language-python"><a class="sourceLine" id="cb18-1" data-line-number="1"><span class="co">#!/usr/bin/python3</span></a>
<a class="sourceLine" id="cb18-2" data-line-number="2"><span class="co"># -*- coding: utf-8 -*-</span></a>
<a class="sourceLine" id="cb18-3" data-line-number="3"></a>
<a class="sourceLine" id="cb18-4" data-line-number="4"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb18-5" data-line-number="5"><span class="co">ZetCode PyQt5 tutorial </span></a>
<a class="sourceLine" id="cb18-6" data-line-number="6"></a>
<a class="sourceLine" id="cb18-7" data-line-number="7"><span class="co">This example shows a QProgressBar widget.</span></a>
<a class="sourceLine" id="cb18-8" data-line-number="8"></a>
<a class="sourceLine" id="cb18-9" data-line-number="9"><span class="co">Author: Jan Bodnar</span></a>
<a class="sourceLine" id="cb18-10" data-line-number="10"><span class="co">Website: zetcode.com </span></a>
<a class="sourceLine" id="cb18-11" data-line-number="11"><span class="co">Last edited: August 2017</span></a>
<a class="sourceLine" id="cb18-12" data-line-number="12"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb18-13" data-line-number="13"></a>
<a class="sourceLine" id="cb18-14" data-line-number="14"><span class="im">from</span> PyQt5.QtWidgets <span class="im">import</span> (QWidget, QProgressBar, </a>
<a class="sourceLine" id="cb18-15" data-line-number="15">    QPushButton, QApplication)</a>
<a class="sourceLine" id="cb18-16" data-line-number="16"><span class="im">from</span> PyQt5.QtCore <span class="im">import</span> QBasicTimer</a>
<a class="sourceLine" id="cb18-17" data-line-number="17"><span class="im">import</span> sys</a>
<a class="sourceLine" id="cb18-18" data-line-number="18"></a>
<a class="sourceLine" id="cb18-19" data-line-number="19"><span class="kw">class</span> Example(QWidget):</a>
<a class="sourceLine" id="cb18-20" data-line-number="20">    </a>
<a class="sourceLine" id="cb18-21" data-line-number="21">    <span class="kw">def</span> <span class="fu">__init__</span>(<span class="va">self</span>):</a>
<a class="sourceLine" id="cb18-22" data-line-number="22">        <span class="bu">super</span>().<span class="fu">__init__</span>()</a>
<a class="sourceLine" id="cb18-23" data-line-number="23">        </a>
<a class="sourceLine" id="cb18-24" data-line-number="24">        <span class="va">self</span>.initUI()</a>
<a class="sourceLine" id="cb18-25" data-line-number="25">        </a>
<a class="sourceLine" id="cb18-26" data-line-number="26">        </a>
<a class="sourceLine" id="cb18-27" data-line-number="27">    <span class="kw">def</span> initUI(<span class="va">self</span>):      </a>
<a class="sourceLine" id="cb18-28" data-line-number="28"></a>
<a class="sourceLine" id="cb18-29" data-line-number="29">        <span class="va">self</span>.pbar <span class="op">=</span> QProgressBar(<span class="va">self</span>)</a>
<a class="sourceLine" id="cb18-30" data-line-number="30">        <span class="va">self</span>.pbar.setGeometry(<span class="dv">30</span>, <span class="dv">40</span>, <span class="dv">200</span>, <span class="dv">25</span>)</a>
<a class="sourceLine" id="cb18-31" data-line-number="31"></a>
<a class="sourceLine" id="cb18-32" data-line-number="32">        <span class="va">self</span>.btn <span class="op">=</span> QPushButton(<span class="st">&#39;Start&#39;</span>, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb18-33" data-line-number="33">        <span class="va">self</span>.btn.move(<span class="dv">40</span>, <span class="dv">80</span>)</a>
<a class="sourceLine" id="cb18-34" data-line-number="34">        <span class="va">self</span>.btn.clicked.<span class="ex">connect</span>(<span class="va">self</span>.doAction)</a>
<a class="sourceLine" id="cb18-35" data-line-number="35"></a>
<a class="sourceLine" id="cb18-36" data-line-number="36">        <span class="va">self</span>.timer <span class="op">=</span> QBasicTimer()</a>
<a class="sourceLine" id="cb18-37" data-line-number="37">        <span class="va">self</span>.step <span class="op">=</span> <span class="dv">0</span></a>
<a class="sourceLine" id="cb18-38" data-line-number="38">        </a>
<a class="sourceLine" id="cb18-39" data-line-number="39">        <span class="va">self</span>.setGeometry(<span class="dv">300</span>, <span class="dv">300</span>, <span class="dv">280</span>, <span class="dv">170</span>)</a>
<a class="sourceLine" id="cb18-40" data-line-number="40">        <span class="va">self</span>.setWindowTitle(<span class="st">&#39;QProgressBar&#39;</span>)</a>
<a class="sourceLine" id="cb18-41" data-line-number="41">        <span class="va">self</span>.show()</a>
<a class="sourceLine" id="cb18-42" data-line-number="42">        </a>
<a class="sourceLine" id="cb18-43" data-line-number="43">        </a>
<a class="sourceLine" id="cb18-44" data-line-number="44">    <span class="kw">def</span> timerEvent(<span class="va">self</span>, e):</a>
<a class="sourceLine" id="cb18-45" data-line-number="45">      </a>
<a class="sourceLine" id="cb18-46" data-line-number="46">        <span class="cf">if</span> <span class="va">self</span>.step <span class="op">&gt;=</span> <span class="dv">100</span>:</a>
<a class="sourceLine" id="cb18-47" data-line-number="47">            <span class="va">self</span>.timer.stop()</a>
<a class="sourceLine" id="cb18-48" data-line-number="48">            <span class="va">self</span>.btn.setText(<span class="st">&#39;Finished&#39;</span>)</a>
<a class="sourceLine" id="cb18-49" data-line-number="49">            <span class="cf">return</span></a>
<a class="sourceLine" id="cb18-50" data-line-number="50">            </a>
<a class="sourceLine" id="cb18-51" data-line-number="51">        <span class="va">self</span>.step <span class="op">=</span> <span class="va">self</span>.step <span class="op">+</span> <span class="dv">1</span></a>
<a class="sourceLine" id="cb18-52" data-line-number="52">        <span class="va">self</span>.pbar.setValue(<span class="va">self</span>.step)</a>
<a class="sourceLine" id="cb18-53" data-line-number="53">        </a>
<a class="sourceLine" id="cb18-54" data-line-number="54"></a>
<a class="sourceLine" id="cb18-55" data-line-number="55">    <span class="kw">def</span> doAction(<span class="va">self</span>):</a>
<a class="sourceLine" id="cb18-56" data-line-number="56">      </a>
<a class="sourceLine" id="cb18-57" data-line-number="57">        <span class="cf">if</span> <span class="va">self</span>.timer.isActive():</a>
<a class="sourceLine" id="cb18-58" data-line-number="58">            <span class="va">self</span>.timer.stop()</a>
<a class="sourceLine" id="cb18-59" data-line-number="59">            <span class="va">self</span>.btn.setText(<span class="st">&#39;Start&#39;</span>)</a>
<a class="sourceLine" id="cb18-60" data-line-number="60">        <span class="cf">else</span>:</a>
<a class="sourceLine" id="cb18-61" data-line-number="61">            <span class="va">self</span>.timer.start(<span class="dv">100</span>, <span class="va">self</span>)</a>
<a class="sourceLine" id="cb18-62" data-line-number="62">            <span class="va">self</span>.btn.setText(<span class="st">&#39;Stop&#39;</span>)</a>
<a class="sourceLine" id="cb18-63" data-line-number="63">            </a>
<a class="sourceLine" id="cb18-64" data-line-number="64">        </a>
<a class="sourceLine" id="cb18-65" data-line-number="65"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">&#39;__main__&#39;</span>:</a>
<a class="sourceLine" id="cb18-66" data-line-number="66">    </a>
<a class="sourceLine" id="cb18-67" data-line-number="67">    app <span class="op">=</span> QApplication(sys.argv)</a>
<a class="sourceLine" id="cb18-68" data-line-number="68">    ex <span class="op">=</span> Example()</a>
<a class="sourceLine" id="cb18-69" data-line-number="69">    sys.exit(app.exec_())</a></code></pre></div>
<p>我们创建了一个水平的进度条和一个按钮，这个按钮控制进度条的开始和停止。</p>
<pre><code class="language-python">self.pbar = QProgressBar(self)</code></pre>
<p>新建一个<code>QProgressBar</code>构造器。</p>
<pre><code class="language-python">self.timer = QtCore.QBasicTimer()</code></pre>
<p>用时间控制进度条。</p>
<pre><code class="language-python">self.timer.start(100, self)</code></pre>
<p>调用<code>start()</code>方法加载一个时间事件。这个方法有两个参数：过期时间和事件接收者。</p>
<pre><code class="language-python">def timerEvent(self, e):
  
    if self.step &gt;= 100:
    
        self.timer.stop()
        self.btn.setText(&#39;Finished&#39;)
        return
        
    self.step = self.step + 1
    self.pbar.setValue(self.step)</code></pre>
<p>每个<code>QObject</code>和又它继承而来的对象都有一个<code>timerEvent()</code>事件处理函数。为了触发事件，我们重载了这个方法。</p>
<pre><code class="language-python">def doAction(self):
  
    if self.timer.isActive():
        self.timer.stop()
        self.btn.setText(&#39;Start&#39;)
        
    else:
        self.timer.start(100, self)
        self.btn.setText(&#39;Stop&#39;)</code></pre>
<p>里面的<code>doAction()</code>方法是用来控制开始和停止的。</p>
<p>程序展示：</p>
<figure>
<img class="whitelist" src="docs/PyQt5/images/6-qprogressbar.png" alt="QProgressBar" />
</figure>
<h2 id="日历">日历</h2>
<p><code>QCalendarWidget</code>提供了基于月份的日历插件，十分简易而且直观。</p>
<div class="sourceCode" id="cb24"><pre><code class="language-python"><a class="sourceLine" id="cb24-1" data-line-number="1"><span class="co">#!/usr/bin/python3</span></a>
<a class="sourceLine" id="cb24-2" data-line-number="2"><span class="co"># -*- coding: utf-8 -*-</span></a>
<a class="sourceLine" id="cb24-3" data-line-number="3"></a>
<a class="sourceLine" id="cb24-4" data-line-number="4"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb24-5" data-line-number="5"><span class="co">ZetCode PyQt5 tutorial </span></a>
<a class="sourceLine" id="cb24-6" data-line-number="6"></a>
<a class="sourceLine" id="cb24-7" data-line-number="7"><span class="co">This example shows a QCalendarWidget widget.</span></a>
<a class="sourceLine" id="cb24-8" data-line-number="8"></a>
<a class="sourceLine" id="cb24-9" data-line-number="9"><span class="co">Author: Jan Bodnar</span></a>
<a class="sourceLine" id="cb24-10" data-line-number="10"><span class="co">Website: zetcode.com </span></a>
<a class="sourceLine" id="cb24-11" data-line-number="11"><span class="co">Last edited: August 2017</span></a>
<a class="sourceLine" id="cb24-12" data-line-number="12"><span class="co">&quot;&quot;&quot;</span></a>
<a class="sourceLine" id="cb24-13" data-line-number="13"></a>
<a class="sourceLine" id="cb24-14" data-line-number="14"><span class="im">from</span> PyQt5.QtWidgets <span class="im">import</span> (QWidget, QCalendarWidget, </a>
<a class="sourceLine" id="cb24-15" data-line-number="15">    QLabel, QApplication, QVBoxLayout)</a>
<a class="sourceLine" id="cb24-16" data-line-number="16"><span class="im">from</span> PyQt5.QtCore <span class="im">import</span> QDate</a>
<a class="sourceLine" id="cb24-17" data-line-number="17"><span class="im">import</span> sys</a>
<a class="sourceLine" id="cb24-18" data-line-number="18"></a>
<a class="sourceLine" id="cb24-19" data-line-number="19"><span class="kw">class</span> Example(QWidget):</a>
<a class="sourceLine" id="cb24-20" data-line-number="20">    </a>
<a class="sourceLine" id="cb24-21" data-line-number="21">    <span class="kw">def</span> <span class="fu">__init__</span>(<span class="va">self</span>):</a>
<a class="sourceLine" id="cb24-22" data-line-number="22">        <span class="bu">super</span>().<span class="fu">__init__</span>()</a>
<a class="sourceLine" id="cb24-23" data-line-number="23">        </a>
<a class="sourceLine" id="cb24-24" data-line-number="24">        <span class="va">self</span>.initUI()</a>
<a class="sourceLine" id="cb24-25" data-line-number="25">        </a>
<a class="sourceLine" id="cb24-26" data-line-number="26">        </a>
<a class="sourceLine" id="cb24-27" data-line-number="27">    <span class="kw">def</span> initUI(<span class="va">self</span>):      </a>
<a class="sourceLine" id="cb24-28" data-line-number="28">        </a>
<a class="sourceLine" id="cb24-29" data-line-number="29">        vbox <span class="op">=</span> QVBoxLayout(<span class="va">self</span>)</a>
<a class="sourceLine" id="cb24-30" data-line-number="30"></a>
<a class="sourceLine" id="cb24-31" data-line-number="31">        cal <span class="op">=</span> QCalendarWidget(<span class="va">self</span>)</a>
<a class="sourceLine" id="cb24-32" data-line-number="32">        cal.setGridVisible(<span class="va">True</span>)</a>
<a class="sourceLine" id="cb24-33" data-line-number="33">        cal.clicked[QDate].<span class="ex">connect</span>(<span class="va">self</span>.showDate)</a>
<a class="sourceLine" id="cb24-34" data-line-number="34">        </a>
<a class="sourceLine" id="cb24-35" data-line-number="35">        vbox.addWidget(cal)</a>
<a class="sourceLine" id="cb24-36" data-line-number="36">        </a>
<a class="sourceLine" id="cb24-37" data-line-number="37">        <span class="va">self</span>.lbl <span class="op">=</span> QLabel(<span class="va">self</span>)</a>
<a class="sourceLine" id="cb24-38" data-line-number="38">        date <span class="op">=</span> cal.selectedDate()</a>
<a class="sourceLine" id="cb24-39" data-line-number="39">        <span class="va">self</span>.lbl.setText(date.toString())</a>
<a class="sourceLine" id="cb24-40" data-line-number="40">        </a>
<a class="sourceLine" id="cb24-41" data-line-number="41">        vbox.addWidget(<span class="va">self</span>.lbl)</a>
<a class="sourceLine" id="cb24-42" data-line-number="42">        </a>
<a class="sourceLine" id="cb24-43" data-line-number="43">        <span class="va">self</span>.setLayout(vbox)</a>
<a class="sourceLine" id="cb24-44" data-line-number="44">        </a>
<a class="sourceLine" id="cb24-45" data-line-number="45">        <span class="va">self</span>.setGeometry(<span class="dv">300</span>, <span class="dv">300</span>, <span class="dv">350</span>, <span class="dv">300</span>)</a>
<a class="sourceLine" id="cb24-46" data-line-number="46">        <span class="va">self</span>.setWindowTitle(<span class="st">&#39;Calendar&#39;</span>)</a>
<a class="sourceLine" id="cb24-47" data-line-number="47">        <span class="va">self</span>.show()</a>
<a class="sourceLine" id="cb24-48" data-line-number="48">        </a>
<a class="sourceLine" id="cb24-49" data-line-number="49">        </a>
<a class="sourceLine" id="cb24-50" data-line-number="50">    <span class="kw">def</span> showDate(<span class="va">self</span>, date):     </a>
<a class="sourceLine" id="cb24-51" data-line-number="51">        </a>
<a class="sourceLine" id="cb24-52" data-line-number="52">        <span class="va">self</span>.lbl.setText(date.toString())</a>
<a class="sourceLine" id="cb24-53" data-line-number="53">        </a>
<a class="sourceLine" id="cb24-54" data-line-number="54">        </a>
<a class="sourceLine" id="cb24-55" data-line-number="55"><span class="cf">if</span> <span class="va">__name__</span> <span class="op">==</span> <span class="st">&#39;__main__&#39;</span>:</a>
<a class="sourceLine" id="cb24-56" data-line-number="56">    </a>
<a class="sourceLine" id="cb24-57" data-line-number="57">    app <span class="op">=</span> QApplication(sys.argv)</a>
<a class="sourceLine" id="cb24-58" data-line-number="58">    ex <span class="op">=</span> Example()</a>
<a class="sourceLine" id="cb24-59" data-line-number="59">    sys.exit(app.exec_())</a></code></pre></div>
<p>这个例子有日期组件和标签组件组成，标签显示被选中的日期。</p>
<pre><code class="language-python">cal = QCalendarWidget(self)</code></pre>
<p>创建一个<code>QCalendarWidget</code>。</p>
<pre><code class="language-python">cal.clicked[QDate].connect(self.showDate)</code></pre>
<p>选择一个日期时，<code>QDate</code>的点击信号就触发了，把这个信号和我们自己定义的<code>showDate()</code>方法关联起来。</p>
<pre><code class="language-python">def showDate(self, date):     
    
    self.lbl.setText(date.toString())</code></pre>
<p>使用<code>selectedDate()</code>方法获取选中的日期，然后把日期对象转成字符串，在标签里面显示出来。</p>
<p>程序展示：</p>
<figure>
<img class="whitelist" src="docs/PyQt5/images/6-calendar.png" alt="calendar" />
</figure>
